/**
 * 报销单关联发票袋
 */
import React from 'react';
import moment from 'moment'
import { connect } from 'react-redux'
import { messages } from "share/common";
import errorMessage from 'share/errorMessage';
import { Modal, Alert, Select, Row, Col, message } from "antd"
const { Option } = Select;
import Condition from 'components/condition'
const { If } = Condition;

import expenseReportService from 'containers/expense-report/expense-report.service'
import expenseReportFunction from 'containers/expense-report/expense-report.function'
const { getReportStatus } = expenseReportFunction;
import 'styles/expense-report/components/expense-associated-bag.scss'

class ExpenseAssociatedBag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      bagCode: '',
    }
  }

  componentWillReceiveProps(nextProps) {
    const { visible, dataObj } = nextProps;
    if (visible && !this.props.visible) {
      let bagRows = dataObj.rows || [];
      this.setState({ bagCode: bagRows[0] && bagRows[0].expenseReportBagCode, chooseData: bagRows[0] && bagRows[0].expenseReportBagCode })
    }
  }

  getStatus = () => {
    const { dataObj } = this.props;
    let statusText = [];
    dataObj.data && dataObj.data.statuses.map(status => {
      statusText.push(getReportStatus({ status }).text);
    });
    return statusText.join(', ');
  };

  handleOk = () => {
    const { dataObj, expenseReportId, onSuccess } = this.props;
    const { bagCode } = this.state;
    if (!bagCode) {
      message.warning(messages('expense-parent-report.key245')/*请选择关联发票袋*/);
      return
    }
    if (bagCode.length > 99) {
      message.warning(messages('expense-parent-report.key263')/*发票袋编号最多99位*/);
      return
    }
    let params = {
      expenseReportBagCode: bagCode,
      expenseReportIds: [expenseReportId]
    };
    dataObj.rows && dataObj.rows.filter(item => item.expenseReportBagCode === bagCode && (params.id = item.id));
    this.setState({ loading: true });
    expenseReportService.addAssociatedBag(params).then(res => {
      this.setState({ loading: false });
      onSuccess();
    }).catch(e => {
      this.setState({ loading: false });
      errorMessage(e.response);
    })
  };

  render() {
    const { visible, dataObj, onCancel } = this.props;
    const { loading, bagCode } = this.state;
    return (
      <Modal
        title={messages('expense-parent-report.key246')/*关联发票袋*/}
        visible={visible}
        wrapClassName="expense-associated-bag"
        okText={messages('common.submit')/*提交*/}
        confirmLoading={loading}
        onOk={this.handleOk}
        onCancel={onCancel}
      >
        {/* <If value={dataObj.data && dataObj.data.statuses && dataObj.data.statuses.length}>
          <Alert
            message={messages('expense-parent-report.key247',{arg1: this.getStatus()})}
            type="info"
            showIcon
            className="notice-info"
          />
        </If> */}
        <Row>
          <Col span={6} className="select-bag-title">{messages('expense-parent-report.key246')/*关联发票袋*/}</Col>
          <Col span={13} offset={1}>
            <Select
              mode="combobox"
              optionLabelProp="title"
              className="select-bag-container"
              value={bagCode}
              getPopupContainer={() => document.getElementsByClassName('expense-associated-bag')[0]}
              onChange={bagCode => this.setState({ bagCode, chooseData: bagCode })}
              onFocus={e => this.setState({ bagCode: '' })}
              onBlur={e => this.setState({ bagCode: this.state.chooseData })}
            >
              {dataObj.rows && dataObj.rows.map(item => (
                <Option key={item.expenseReportBagCode} title={item.expenseReportBagCode}>
                  <div className="select-bag-option">
                    <div className="bag-num">{messages('expense-parent-report.key248')/*发票袋编号*/}: {item.expenseReportBagCode}</div>
                    <div className="description">
                      {messages('expense-parent-report.key266')/*更新日期*/}: {moment(item.lastModifiedDate).format('YYYY-MM-DD')}
                    </div>
                  </div>
                </Option>
              ))}
            </Select>
          </Col>
        </Row>
        <Row style={{ marginTop: 20, textAlign: 'center' }}>
          <Col span={20} style={{ marginLeft: '3px' }}>请收到“报销单寄件通知“邮件后，再寄送发票袋。</Col>
        </Row>
      </Modal>
    )
  }
}

ExpenseAssociatedBag.propTypes = {
  visible: React.PropTypes.bool,
  dataObj: React.PropTypes.object,
  expenseReportId: React.PropTypes.number,
  onCancel: React.PropTypes.func,
  onSuccess: React.PropTypes.func,
};

function mapStateToProps(state) {
  return { }
}

export default connect(mapStateToProps)(ExpenseAssociatedBag)
